<script setup lang="ts">
import { ref, defineExpose, reactive, onMounted, computed } from "vue";
import { onClickOutside } from "@vueuse/core";

const container = ref<HTMLElement>();
const transition_promise = ref<Promise<null>>();
onMounted(() => {
  container.value?.addEventListener("transitionstart", () => {
    transition_promise.value = new Promise((resolve) => {
      container.value?.addEventListener("transitionend", () => {
        resolve(null);
      });
      container.value?.addEventListener("transitioncancel", () => {
        resolve(null);
      });
    });
  });
});

const is_out=ref(true)
const pop_in = () => {
  is_out.value = false;
};

const pop_out = () => {
  is_out.value = true;
};


onClickOutside(container, () => pop_out());

defineExpose({
  pop_in,
  pop_out,
  is_out,
  transition_promise,
});
</script>

<template>
  <div class="container" :class="{out:is_out}" ref="container">
    <div class="header">
      <slot name="header"></slot>
    </div>
    <div class="menu-items">
      <slot name="menu-items"> </slot>
    </div>
  </div>
</template>

<style scoped>
.container {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  transition: all 0.2s ease-in-out;
}
.container.out {
  transform: translateY(100%);
  opacity: 0;
}
.header {
  width: 100%;
}
.menu-items {
  width: 100%;
  display: flex;
  flex-direction: column;
}
</style>
